window.addEventListener('load', function () {
    //main轮播图制作
    var focus = document.querySelector('.focus');
    var focusLeft = document.querySelector('.focus_left');
    var focusRight = document.querySelector('.focus_right');
    var focusWidth = focus.offsetWidth;
    //鼠标经过
    focus.addEventListener('mouseenter', function () {
        focusLeft.style.display = 'block';
        focusRight.style.display = 'block';
        clearInterval(timer);
        timer = null;
    })
    //鼠标离开
    focus.addEventListener('mouseleave', function () {
        focusLeft.style.display = 'none';
        focusRight.style.display = 'none';
        timer = setInterval(function () {
            //手动调用点击事件
            focusRight.click();
        }, 3000)
    })
    //js动态生成小圆圈
    var ul = focus.querySelector('ul');
    var ol = focus.querySelector('ol');
    for (var i = 0; i < ul.children.length; i++) {
        var li = document.createElement('li');
        //创建li的时候给每个li添加一个索引
        li.setAttribute('data-index', i);
        ol.appendChild(li);
        //在动态生成的同时绑定点击事件
        li.addEventListener('click', function () {
            //排他思想
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            this.className = 'current';
            //先获得图片的宽度，也就是focus大盒子的宽度
            //获取索引号
            var index = this.getAttribute('data-index');
            // 解决两个小BUG
            num = index;
            circle = index;
            //图片的移动距离就是 索引号 * 图片的宽度
            animate(ul, -index * focusWidth);
        })
    }
    //设置默认第一个小圆圈被选中状态
    ol.children[0].className = 'current';
    //轮播图的无缝滚动需要克隆节点
    var first = ul.children[0].cloneNode(true);
    //添加克隆节点
    ul.appendChild(first);
    //给左右按钮添加效果
    var num = 0;
    var circle = 0
    var flag = true;//节流阀  防止点击太快
    //右侧按钮
    focusRight.addEventListener('click', function () {
        if (flag) {
            flag = false;//先关闭节流阀
            //轮播图的无缝滚动效果
            if (num == ul.children.length - 1) {
                ul.style.left = 0;
                num = 0;
            }
            num++;
            animate(ul, - num * focusWidth, function () {
                flag = true
            });

            circle++;
            if (circle == ol.children.length) {
                circle = 0;
            }
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
        }
    })
    //左侧按钮
    focusLeft.addEventListener('click', function () {
        if (flag) {
            flag = false;
            //轮播图的无缝滚动效果
            if (num == 0) {
                ul.style.left = -(ul.children.length - 1) * focusWidth + 'px';
                num = ul.children.length - 1;
            }
            num--;
            animate(ul, -num * focusWidth, function () {
                flag = true;
            });

            circle--;
            if (circle < 0) {
                circle = ol.children.length - 1;
            }
            for (var i = 0; i < ol.children.length; i++) {
                ol.children[i].className = '';
            }
            ol.children[circle].className = 'current';
        }
    })
    //自动播放轮播图
    var timer = setInterval(function () {
        //手动调用点击事件
        focusRight.click();
    }, 3000)
    //轮播图结束

    //品优购tab栏效果制作
    var as = document.querySelector('.tab_list').querySelectorAll('a');
    var items = document.querySelector('.tab_contant').querySelectorAll('.items');
    for (var i = 0; i < as.length; i++) {
        //设置自定义属性
        as[i].setAttribute('data-index', i);
        as[i].addEventListener('click', function () {
            //点击变色效果
            for (var i = 0; i < as.length; i++) {
                as[i].className = '';
            }
            this.className = 'color_red';

            //得到自定义属性
            var index = this.getAttribute('data-index');
            for (var i = 0; i < items.length; i++) {
                items[i].style.display = 'none';
            }
            items[index].style.display = 'block';
        })
    }
    //品优购tab效果栏完成

    // //电梯区js制作
    // var ladder = document.querySelector('.ladder ul');
    // var ladder_lis = ladder.querySelectorAll('li');
    // for (var i = 0; i < ladder_lis.length; i++) {
    //     ladder_lis[i].onmouseenter = function () {
    //         this.className = 'ladder_style';
    //     }
    //     ladder_lis[i].onmouseleave = function () {
    //         this.className = '';
    //     }
    // }
    // //电梯区js完成
    //jQuery
    $(function () {
        var flag = true;
        //电梯区jQuery制作
        var fTop = $(".floor").offset().top;
        scrollToggle();
        function scrollToggle() {
            if ($(document).scrollTop() >= fTop - 1) {
                $(".ladder").stop().fadeIn();
            } else {
                $(".ladder").stop().fadeOut();
            }
        }
        $(window).scroll(function () {
            scrollToggle();
            //遍历楼层区
            if (flag) {
                $(".floor .W").each(function (i, ele) {
                    if ($(document).scrollTop() >= $(ele).offset().top - 1) {
                        // console.log(i);
                        $(".ladder ul li").eq(i).addClass("ladder_style").siblings("li").removeClass("ladder_style");
                    }
                })
            }
        });

        $(".ladder ul li").click(function () {
            flag = false;
            // console.log($(this).index());
            var floorTop = $(".floor .W").eq($(this).index()).offset().top;
            $("html, body").stop().animate({
                scrollTop: floorTop
            }, function () {//回调函数
                flag = true;
            });
            $(this).addClass("ladder_style").siblings("li").removeClass("ladder_style");
        })
    });
    //电梯区jQuery完成
})